<template>
  <page-header-wrapper>
    <page-tab-list>
      <a-alert message="此配置用于限制上传图片大小" type="info" show-icon style="margin:24px 0;" />
      <template>
        <a-row :gutter="[16, 30]" type="flex" align="middle">
          <a-col class="required" :span="4" style="text-align: right"> 上传图片限制： </a-col>
          <a-col :span="16">
            <a-input :step="1" type="number" class="input-class" v-model="params.max_picture" addonAfter="M" />
          </a-col>
          <a-col :span="4">
            <a-checkbox @change="onChange" v-model="params.over_picture"> 无限制 </a-checkbox>
          </a-col>
        </a-row>
        <div class="tip">* 勾选无限制时，将依据PHP环境配置中的上传最小值自动作为上传图片视频的最大限制值</div>
        <!-- <a-row :gutter="[16,30]" type="flex" align="top">
          <a-col class="required" :span="4" style="text-align: right;">
            diy组件限制：
          </a-col>
            <a-input
              :step="1"
              type="number"
              class="input-class"
              v-model="params.max_diy"
            />
          <a-col>
            <a-checkbox @change="onDiyChange" v-model="params.over_diy">
                无限制
            </a-checkbox>
          </a-col>
        </a-row> -->
        <a-row :gutter="[30, 30]" type="flex" align="middle">
          <a-col offset="10">
            <a-button type="primary" @click="onSave"> 保存 </a-button>
          </a-col>
        </a-row>
      </template>
    </page-tab-list>
  </page-header-wrapper>
</template>
<script>
import { getRunOverConfig, setRunOverConfig } from '@/api/setting/runOver'

export default {
  name: 'RunOverConfig',
  components: {},
  data() {
    return {
      params: {
        max_picture: null,
        max_diy: null,
        over_picture: false,
        over_diy: false,
      },
      over_picture: 0,
      over_diy: 0,
    }
  },
  async created() {
    await this.getData()
  },
  methods: {
    onSave() {
      const hide = this.$message.loading('提交中', 0)
      this.params.over_diy = this.over_diy
      this.params.over_picture = this.over_picture
      setRunOverConfig(this.params).then((res) => {
        hide()
        if (res.code !== 0) {
          this.$error({
            content: res.msg,
          })
        } else {
          this.$message.success('保存成功！')
        }
      })
    },
    getData: async function () {
      var params = {}
      await getRunOverConfig(params).then((res) => {
        const data = res.data
        this.params.max_picture = data.max_picture
        this.params.max_diy = data.max_diy
        this.over_diy = data.over_diy
        this.over_picture = data.over_picture
        this.params.over_picture = data.over_picture == 1 ? true : false
        this.params.over_diy = data.over_diy == 1 ? true : false
      })
    },
    onChange(e) {
      this.over_picture = e.target.checked == true ? 1 : 0
    },
    onDiyChange(e) {
      this.over_diy = e.target.checked == true ? 1 : 0
    },
  },
}
</script>
<style lang="less" scoped>
.required::before {
  content: '*';
  color: red;
}
.input-class {
  width: 1100px;
  margin: 10px 8px 25px 0;
  max-width: 600px;
}
.tip {
  font-size: 12px;
  color: red;
  padding: 0 255px 10px;
}
</style>
